<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue列表集合简单操作</title>
		<!-- 1.引入vue框架 -->
		<script src="vue.js"></script>
	</head>

	<body>
		<!-- 2.定义根目录标签  -->
		<div id="app">
			<button @click="add">添加学生</button>
			<button @click="del">删除学生</button>
			<table border="1" width="50%" style="border-collapse: collapse;">
				<thead>
					<th>班级</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</thead>
				<tbody>
					<tr align="center" v-for="item in stuList">
						<td>{{item.grade}}</td>
						<td>{{item.name}}</td>
						<td>{{item.gender}}</td>
						<td>{{item.age}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		// 3.创建vue对象
		var vm = new Vue({
			el: "#app", //3-1 定义根元素
			data: { //3-2 定义所有对象当中所使用的变量
				stuList: [{
						grade: 2105,
						name: "宋江",
						gender: "男",
						age: 23
					},
					{
						grade: 2105,
						name: "宋江",
						gender: "男",
						age: 23
					},
					{
						grade: 2105,
						name: "宋江",
						gender: "男",
						age: 23
					},
					{
						grade: 2105,
						name: "宋江",
						gender: "男",
						age: 23
					},
					{
						grade: 2105,
						name: "宋江",
						gender: "男",
						age: 23
					}
				]
			},
			methods: { //3-3 定义当前页面中所使用的方法
				add() {
					console.log("进入添加学生方法");
					var stu = {
						grade: 2105,
						name: "林冲",
						gender: "女",
						age: 53
					};
					this.$data.stuList.push(stu);
				},
				del() {
					console.log("进入删除方法");
					this.$data.stuList.pop()
				}
			}
		})
	</script>

</html>